<template>
	<view class="footer-view">
		<view class="footer-content">
			<view class="desc-view">
				<image src="/static/pc/logo-icon.png" class="logo-css"></image>
				<view class="desc-text">辽宁省大连市高新园区火炬路6号高新壹号大</view>
				<view class="desc-text">京ICP备17018423号-4 Copyright © 2024 大连诺众投资咨询有限公司. All Rights Reserved.</view>
			</view>

			<view class="code-view">
				<view class="service-view">
					<image src="@/static/pc/service-icon.png" class="service-image"></image>
					<view class="service-text">客服电话</view>
					<view class="service-number">400-7700-771</view>
				</view>
				<view class="code-item">
					<image src="@/static/about-7.png" class="code-image"></image>
					<view class="code-text">官微二维码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Footer",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.footer-view {
		width: 100%;
		background: white;
		@extend .column;
		padding: 30px 0;

		.footer-content {
			width: 1200px;
			height: 100%;
			@extend .row-between;
			align-items: flex-start;
			flex-wrap: wrap;

			.desc-view {
				padding-top: 16px;

				.logo-css {
					width: 182px;
					height: 36px;
					margin-bottom: 16px;
				}

				.desc-text {
					font-size: 14px;
					color: #470300;
				}

				.desc-text+.desc-text {
					margin-top: 5px;
				}
			}

			.code-view {
				@extend .row;

				.service-view {
					padding-top: 13px;
					@extend .column;

					.service-image {
						width: 45px;
						height: 46px;
					}

					.service-text {
						font-size: 16px;
						color: #470300;
						margin-top: 4px;
					}

					.service-number {
						font-weight: 600;
						font-size: 20px;
						color: #470300;
						margin-top: 3px;
					}
				}

				.code-item {
					@extend .column;
					margin-left: 22px;

					.code-image {
						width: 86px;
						height: 86px;
					}

					.code-text {
						font-size: 16px;
						color: #470300;
						margin-top: 8px;
					}
				}
			}
		}
	}

	/*1470px*/
	@media only screen and (max-width: 1510px) {
		.footer-view {

			.footer-content {
				width: 100%;
				padding: 0 20px;
			}
		}
	}
	@media only screen and (max-width: 1060px) {
		.footer-view {
			height: inherit;
			padding-bottom: 30px;
			
	
			.footer-content {
				justify-content: center;
				align-items: center;
				.desc-view{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
				.code-view {
					margin-top: 30px;
				}
			}
		}
	}
</style>